<template>
  <div class="menu">
    <el-scrollbar>
      <div
        class="menu-item"
        v-for="(item, index) in menus"
        :key="index"
        :class="{ 'menu-item__active': item.value == active.value }"
        @click="handleClick(item)"
      >
        {{ item.label }}
      </div>
    </el-scrollbar>
  </div>
</template>
  <script setup>
const emtis = defineEmits(['change'])

const props = defineProps({
  menus: Array,
})

const active = ref({
  label: props.menus[0].label,
  value: props.menus[0].value,
  task_type: props.menus[0].task_type,
})

const handleClick = item => {
  active.value = item
  emtis('change', item)
}

onMounted(() => {
  handleClick(active.value)
})
</script>
  <style lang="scss" scoped>
.menu {
  background-color: #fff;
  width: 160px;
  padding: 8px;
  margin-right: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.menu-item {
  line-height: 44px;
  text-align: center;
  cursor: pointer;
  font-family: PingFangSC;
  font-size: 14px;
  font-weight: 600;
  color: #252a30;
}

.menu-item__active {
  background-color: var(--primary);
  color: #fff;
}
</style>
  